---
import type { CollectionEntry } from "astro:content";
import { getCollection } from "astro:content";
import Icon from "astro-icon";
import {
  SITE,
  USE_POST_IMG_OVERLAY,
  USE_AUTHOR_CARD,
  USE_SUBSCRIPTION,
  USE_VIEW_STATS,
} from "../config";
import MainLayout from "../components/MainLayout.astro";
import BaseHead from "../components/BaseHead.astro";
import Prose from "../components/Prose.astro";
import PostStats from "../components/PostStats.svelte";
import EditUrl from "../components/EditLink.astro";

interface Props {
  meta?: {
    id: string;
    slug: string;
    collection: string;
  };
  content: CollectionEntry<"blog">["data"];
  stats?: {
    views: number;
  };
}
const { content, meta } = Astro.props;

// 获取所有博客文章用于导航
const allPosts = await getCollection("blog");
const sortedPosts = allPosts.sort(
  (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
);

// 只有在有meta.slug时才计算导航（即文章页面）
let previousPost, nextPost;
if (meta?.slug) {
  // 找到当前文章的索引
  const currentIndex = sortedPosts.findIndex(post => post.slug === meta?.slug);
  
  // 获取上一篇和下一篇文章
  previousPost = currentIndex > 0 ? sortedPosts[currentIndex - 1] : undefined;
  nextPost = currentIndex < sortedPosts.length - 1 ? sortedPosts[currentIndex + 1] : undefined;
}

const AUTHOR_NAME = content.author
  ? content.author
  : SITE?.author
    ? SITE?.author
    : "Author";
const AUTHOR_TWITTER = content.authorTwitter
  ? content.authorTwitter
  : SITE?.authorTwitter
    ? SITE?.authorTwitter
    : "";
const AUTHOR_AVATAR = content.authorImage
  ? content.authorImage
  : SITE?.authorImage
    ? SITE?.authorImage
    : "";
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead
      {...content}
      title={content.title ? `${SITE.title} | ${content.title}` : SITE.title}
    />
  </head>
  <MainLayout>
    <div class="post__header">
      <h1 class="post__title">{content.title}</h1>
      <div class="post__tags">
        {
          content.tags.length > 0 &&
            content.tags.map((tag) => (
              <a class="post__tag" href={`/tags/${tag}`} title={tag}>
                {tag}
              </a>
            ))
        }
      </div>
      <br />
      <br />
      <h5 class={`post__desc ${AUTHOR_AVATAR ? "flex flex-row gap-2" : ""}`}>
        <div class={AUTHOR_AVATAR ? "flex flex-col border-l-2 pl-2" : ""}>
          <span class="post__date">
            <!-- post creation/updation data -->
            {
              new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(
                new Date(content.date)
              )
            }
          </span>
          <span class="post__stats">
            {USE_VIEW_STATS && ` | `}
            {
              USE_VIEW_STATS && (
                <>
                  <Icon class="w-5 h-5 inline-block" pack="mdi" name="eye" />
                  <PostStats slug={meta?.slug} client:load />
                </>
              )
            }
            <!-- | <Icon class="w-5 h-5 inline-block" pack="mdi" name="clock" /> 2 mins -->
          </span>
        </div>
      </h5>
    </div>
    {
      content.image ? (
        USE_POST_IMG_OVERLAY ? (
          <>
            <div class="img__outer">
              <img src={content.image} alt={content.title} />
              <div class="img_gradient" />
            </div>
            <br />
          </>
        ) : (
          <>
            <img class="img__outer" src={content.image} alt={content.title} />
            <br />
          </>
        )
      ) : (
        ""
      )
    }
    <Prose 
      currentPost={{ data: content, slug: meta?.slug }}
      previousPost={previousPost}
      nextPost={nextPost}
    >
      <slot />
    </Prose>
  </MainLayout>
  <style>
    .post__header {
      @apply py-4 mb-1 text-left;
    }
    .post__title {
      @apply text-4xl font-extrabold text-theme-primary dark:text-theme-dark-primary;
    }
    .post__desc {
      @apply text-gray-500 dark:text-gray-100 flex flex-none text-left;
    }
    .post__author {
      @apply no-underline dark:text-white hover:text-theme-primary;
    }
    .post__date,
    .post__stats {
      @apply text-gray-500;
    }
    .post__tags {
      @apply inline-flex gap-2 flex-wrap;
    }
    .post__tag {
      @apply text-gray-400 hover:text-theme-primary dark:hover:text-theme-dark-primary;
    }

    .avatar {
      @apply w-12 h-12 rounded-full object-cover p-1 border-2 border-solid border-theme-dark-primary dark:border-theme-primary;
    }
    .avatar--lg {
      @apply w-32 h-32;
    }

    .img__outer {
      @apply relative rounded-lg shadow-xl overflow-hidden;
    }
    .img_gradient {
      @apply absolute z-10 w-full bottom-0 left-0 h-full bg-gradient-to-tr from-theme-primary dark:from-theme-dark-primary;
    }

    .author-card {
      @apply text-gray-500 dark:text-gray-100 flex flex-row gap-4 justify-start text-left;
    }
    .author-card__meta {
      @apply border-l pl-4;
    }
    .author-card__author {
      @apply text-2xl mb-1;
    }
    .author-card__bio {
      @apply text-gray-400;
    }

    .subscription-form {
      @apply w-4/6 mt-2 flex flex-row rounded-lg overflow-hidden shadow-lg;
    }
    .subscription-form input {
      @apply flex-grow border-0 text-theme-accent-gray-dark;
    }
    .subscription-form button,
    .button {
      @apply px-4 py-2 uppercase font-bold text-white bg-gradient-to-tr from-theme-primary to-theme-dark-secondary dark:from-theme-dark-secondary dark:to-theme-primary;
    }
    .author-card__follow-btn {
      @apply rounded-md shadow-md shadow-theme-dark-secondary dark:shadow-theme-primary hover:shadow-theme-secondary hover:dark:shadow-theme-secondary hover:shadow-lg transition-all;
    }
  </style>
</html>
